<template>
    <div style="width: 100%">
        <div class="box" >
            <div class="box-left">
                <div class="top" style="margin-top: 20px">
                    <el-card class="box-card">
                        <div class="text item">
                            <div class="title">2021 腾讯校招 + 后台开发面经（已 offer）</div>
                            <div class="dec">
                                综合总结：

                                面试效率极高
                                面试官全程引导性面试，尽显大佬风范。
                                有不会的题目可以和面试官讨论探索，体验极好。

                                知识总结：

                                常见网络协议及性质
                                基础数据结构和算法
                                实际问题的解决经验

                                腾讯一面  时长 70 分钟
                                自我介绍
                                常见数据结构对应的性质，用途，常用算法。
                                TCP 和 UDP 的区别，为什么头部长度不一样
                            </div>
                            <div class="but">
                        <span>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/3ebba37455d84fe795e87d958da9c7ce" height="16" width="16"/>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/462f9dc3942e49ed928f5b7060764276" height="16" width="16"/>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/80055ef5eb0ae91cca60de6f23aad7e2.jpg" height="16" width="16"/>
                        </span>
                                <span style="color: #c6dbe6">
                             3.0k用户正在围观
                        </span>
                                <span style="float: right">
                            <a href="#" style="color: #409EFF">进入讨论</a>
                        </span>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="box-card" style="margin-left: 30px">
                        <div class="text item">
                            <div class="title">大家在工作之后是怎么提高自己的？</div>
                            <div class="dec">
                                平时大家的工作业务真的会使自己的技术提高很多吗？
                                现在上班除了CRUD，没有多少挑战性的工作，觉得时间久了这样的工作状态很难受，应该怎么以大厂的标准去提高努力？
                                双非社招要进大厂应该朝哪些方向努力呢？
                                现在比较迷茫，刷leetcode也比较菜，很多更难一点的算法就是做不出来，技术也没有多大长进，平时工作用到的技术也不需
                            </div>
                            <div class="but">
                        <span>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/1b2e4df455c64920bbf626f2d4cba6cb" height="16" width="16"/>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/116bfc50583b41ffb3920bf4db8ed298" height="16" width="16"/>
                         <img src="http://www.handsomehuang.cn:8081/img2/userHead/375d77bc79af439781fac558cbc25803" height="16" width="16"/>
                        </span>
                                <span style="color: #c6dbe6">
                             3.0k用户正在围观
                        </span>
                                <span style="float: right">
                            <a href="#" style="color: #409EFF">进入讨论</a>
                        </span>
                            </div>
                        </div>
                    </el-card>
                </div>
                <!--大内容-->
                <inner></inner>
            </div>
            <div class="box-right">
                <div class="block">
                    <el-carousel height="150px">
                        <el-carousel-item style="border-radius: 10px">
                            <img  style="border-radius: 10px" src="../../assets/img/lun1.png" height="150" width="300"/>
                        </el-carousel-item>
                        <el-carousel-item style="border-radius: 10px">
                            <img style="border-radius: 10px" src="../../assets/img/lun2.jpg" height="150" width="300"/>
                        </el-carousel-item>
                        <el-carousel-item style="border-radius: 10px">
                            <img  style="border-radius: 10px" src="../../assets/img/lun3.png" height="150" width="300"/>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div style="margin-top: 10px">
                    <el-card class="box-card" style="width: 300px; height: 720px;">
                        <div slot="header" class="clearfix">
                            <span>博客推荐</span>
                            <div style="margin-top: 10px; margin-bottom: -10px; margin-left: 80px; display: inline-block">
                                <el-radio-group v-model="radio4"  size="mini">
                                    <el-radio-button label="算法" checked ></el-radio-button>
                                    <el-radio-button label="论坛"></el-radio-button>
                                </el-radio-group>
                            </div>
                        </div>
                        <!--排行一栏-->
                        <div v-for="o in 4" :key="o" class="text item" style="padding-top: 0px; margin-top: -10px">
                            <div style="width: 280px;">
                                <el-table :data="tableData" style="width: 100%;">
                                    <el-table-column align="center" prop="date" label="排行" width="48"></el-table-column>
                                    <el-table-column class="right-title" prop="name" label="内容描述"  style="width: 50px" ></el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-card>
                </div>

            </div>


        </div>
        <foot></foot>
    </div>
</template>

<script>
    import Inner from "./inner"
    import Foot from "../../components/common/foot"
    import {request} from "../../network/request";
    export default {
        name: "home",
        data() {
            return {
                radio1: '上海',
                radio2: '上海',
                radio3: '上海',
                radio4: '上海',
                tableData: [{
                    date: '1',
                    name: '字节跳动 - C++ 工程师面经汇总',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2',
                    name: '这可能是你加入小冰最好的机会 ',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '3',
                    name: '2021 秋招面经总结 —— C++ 篇',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '4',
                    name: '前端面试 JS 编程题目总结',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '5',
                    name: '后端研发和数仓岗位内推',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '6',
                    name: '蚂蚁集团招c++专家，hc充足～',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '7',
                    name: '软件测试--selenium安装使用',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '8',
                    name: '2020 字节跳动 数据库面试题汇总',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '9',
                    name: '图解算法数据结构',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '10',
                    name: '字节测试开发面经（21届秋招）',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '11',
                    name: 'jsliang 2020 求职系列',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '12',
                    name: '2021秋招面经总结Java篇（1）',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            };
        },
        components: {
            'inner' : Inner,
            'foot': Foot
        },
        created() {
           /* console.log(this.$store.state.nickName != "");
            console.log(sessionStorage.getItem('logining'));*/
            if(this.$store.state.nickName != "" &&  sessionStorage.getItem('logining') == null){
                sessionStorage.setItem('logining', true);
                location.reload();
            };
            let phone = this.$cookies.get("phoneNumber");
            console.log(phone)
            if(phone != null && sessionStorage.getItem("phoneNumber") == null){
                let passWord = this.$cookies.get("passWord");
                request({
                    url: "/checkUser",
                    method: "post",
                    params: {
                        phoneNumber: phone,
                        passWord: passWord
                    }
                }).then(res => {
                    console.log(res.data);
                    //console.log(res);
                    let data = res.data;
                    console.log(data);
                    if (res.data != false) {

                        var nickName = data.nickName;
                        var passWord = data.passWord;
                        var phoneNumber = data.phoneNumber;
                        var imgUrl = data.imgUrl;
                        var id = data.id;
                        console.log(passWord);
                        sessionStorage.setItem('nickName', nickName);
                        sessionStorage.setItem('passWord', passWord);
                        sessionStorage.setItem('phoneNumber', phoneNumber);
                        sessionStorage.setItem('imgUrl', imgUrl);
                        sessionStorage.setItem('userId', id);
                        sessionStorage.setItem('vip', data.vip);
                        sessionStorage.setItem('surplus', data.surplus);
                        this.$store.state.nickName = nickName;
                        this.$store.state.passWord = passWord;
                        this.$store.state.phoneNumber = phoneNumber;
                        this.$store.state.imgUrl = imgUrl;
                        this.$router.replace("/home");

                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        }
    }

</script>

<style scoped>
    .box-card div{
        cursor: pointer;
    }

    .box{
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    .text {
        font-size: 14px;
    }

    .item {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 14px;
        line-height: 1.42857;
        padding: 5px 0 18px;
    }

    .box-card {
        width: 380px;
        height: 180px;
        display: inline-block;
    }

    .item .title{
        font-size: 16px;
        font-weight: 500;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
        line-height: 20px;
    }
    .dec{
        -webkit-line-clamp: 3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin: 16px 0px;
        height: 60px;
    }
    .but img{
        border-radius: 50%;
        margin-left: -4px;
    }
    .box-left{
        width: 800px;
        display: inline-block;
    }
    .box-right{
        width: 300px;
        height: 100px;
        display: inline-block;
        position: absolute;
        top: 20px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }



</style>